<template>
    <ak-header data-display="false">
    </ak-header>
    <ak-main>
        <div class="plug_welcome w_100 fix top_0 left_0 vh_100 ovh rel bg_taobao">
            <ul class="h_in defer_1">
                <li class="h_in">
                    <section class="wh_100 rel ovh bg_taobao">
                        <i class="icon-im_andrew text_6rem w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                        <h1 class="c_white text_al_c line_h_8rem" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是1号屏幕，第一屏,请右侧滑动切换界面</h1>
                    </section>
                </li>
                <li class="h_in">
                    <section class="wh_100 rel ovh bg_alipay">
                        <i class="icon-im_andrew text_6rem w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInRight', duration:1, delay:0}"></i>
                        <h1 class="c_white text_al_c line_h_8rem" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是2号屏幕，左右滑动切换界面</h1>
                    </section>
                </li>
                <li class="h_in">
                    <section class="wh_100 rel ovh bg_wechat">
                        <i class="icon-im_andrew text_6rem w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                        <h1 class="c_white text_al_c line_h_8rem" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是3号屏幕，左右滑动切换界面</h1>
                    </section>
                </li>
                <li class="h_in">
                    <section class="wh_100 rel ovh bg_orange-yellow">
                        <i class="icon-im_andrew text_6rem w_100 mt_30 text_al_c c_white" data-animation="{name:'zoomInLeft', duration:1, delay:0}"></i>
                        <h1 class="c_white text_al_c line_h_8rem" data-animation="{name:'swashIn', duration:1, delay:0.5}">你好，我是4号屏幕，到头了，请左侧滑动切换界面</h1>
                        <fieldset class="abs bottom_30 w_100">
                            <button type="button" class="rel w_30 center h_24rem bg_white bor_rad_03rem c_theme text_14rem" data-animation="{name:'tinDownIn', duration:1, delay:1}" data-href="/page1">点击进入</button>
                        </fieldset>
                    </section>
                </li>
            </ul>
        </div>
    </ak-main>

    <ak-footer data-display="false">
    </ak-footer>
</template>

<script type="text/javascript">
    //引入AKjs功能插件的区域

    /*-----------------------------------------------AKjs_Slider 使用方法-------------------------------------------*/
    $(function() {
        $(".plug_welcome").AKjs_Slider({
            start: 1, //默认显示的图片排号
            fullpage: true, //是否满屏模式滑动（true，false）
            SlideAni: true, //是否开启滑落动画切换效果 （false代表只能显示和隐藏效果）
            UpDown: false, //是否开启上下滑动切换功能，启用该功能不能左右滑动。SlideAni参数开启后才能使用（true，false）
            speed: 500, //图片切换的速度
            interval: 5000, //图片切换间隔毫秒
            touchPlay: true, //是否开启鼠标或触屏滑动时切换联播图（true，false）
            autoPlay: false, //幻灯片是否自动播放（true，false）
            HoverPause: true, //幻灯片自动播放时是否鼠标滑动后暂停联播图（true，false）
            loopPlay:false, //幻灯片是否循环播放（true，false）
            dotShow: true, //是否显示幻灯片位置按钮（true，false）
            arrShow: false, //是否显示左右切换按钮（true，false）
            dotClass: "fl wh_08rem bg_black04 mb_05rem mr_05rem bor_rad_50 pointer", //底部图片位置的样式设置
            ActiveClass: "bg_white", //底部图片位置的当前样式
            afterSlider: function(num) { //回调获取当前的数
                //console.log(num);
            }
        });
    });
</script>

<style type="text/css">
    /*样式覆盖区域*/
</style>

<!--
* ak-header和ak-footer元素的data-display值是隐藏和显示APP的头部区域和底部菜单区域 (true / false)；
ak-main和ak-scrollview元素的data-bounce值是滚动区域是否开启ios弹性效果的功能 (true / false)；
button元素的data-back="true"值是识别为该按钮是返回键的意思
//注：template，ak-header，ak-footer，script，style等这些元素在页面中不能多个使用否则代码无效；
路由页面的布局结构使用方法（必须用以下的结构使用）：
<template>
    <ak-header>头部区域</ak-header>
    <ak-main>
        <ak-scrollview>
            <div>中间内容</div>
        </ak-scrollview>
        <dialog>弹窗代码</dialog>
    </ak-main>
    <ak-footer>底部区域</ak-footer>
</template>
<script>
    //编写当前页面的脚本代码区域
</script>
<style>
    //覆盖当前界面的样式区域
</style>
-->